<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>用户登录注册系统</title>
    <link rel="stylesheet" href="styles_login_register.css">
</head>

<body>
<!-- 登录表单 -->
<form id="loginForm">
    <h2>登录</h2>
    <input type="text" id="loginName" placeholder="用户名">
    <input type="password" id="loginPassword" placeholder="密码">
    <button type="submit">登录</button>
</form>

<!-- 注册表单 -->
<form id="registerForm">
    <h2>注册</h2>
    <input type="text" id="registerName" placeholder="用户名">
    <input type="password" id="registerPassword" placeholder="密码">
    <input type="password" id="confirmPassword" placeholder="确认密码">
    <button type="submit">注册</button>
</form>

<!-- 登出按钮（初始隐藏，登录后显示） -->
<button id="logoutButton" style="display: none;">登出</button>
<!-- 新增的跳转到下一个页面的按钮 -->
<button id="goToNextPageButton">跳转到用户管理系统</button>
<div id="message"></div>

<script>
    // 获取登录表单元素
    const loginForm = document.getElementById('loginForm');
    // 获取注册表单元素
    const registerForm = document.getElementById('registerForm');
    // 获取登出按钮元素
    const logoutButton = document.getElementById('logoutButton');
    // 获取新添加的跳转到下一个页面的按钮元素
    const goToNextPageButton = document.getElementById('goToNextPageButton');
    // 获取显示消息的元素
    const messageDiv = document.getElementById('message');

    // 为登录按钮添加点击事件监听器
    loginForm.addEventListener('submit', function (e) {
        e.preventDefault();

        const name = document.getElementById('loginName').value;
        const password = document.getElementById('loginPassword').value;

        // 简单验证，这里仅示例非空验证，实际需要更完善规则
        if (name.trim() === '' || password.trim() === '') {
            alert('用户名和密码不能为空');
            return;
        }

        // 使用fetch发送POST请求到后端登录接口
        fetch('http://localhost:3000/login', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ name, password })
        })
            .then(response => {
                if (!response.ok) {
                    console.log('登录请求响应状态码:', response.status);
                    if (response.status === 401) {
                        return response.json().then(data => {
                            console.error('登录失败原因:', data.error);
                            throw new Error(data.error);
                        });
                    }
                    throw new Error('网络请求错误，请稍后重试');
                }
                return response.json();
            })
            .then(data => {
                if (data.message === '登录成功') {
                    // 登录成功，显示登出按钮，隐藏登录注册表单等，可按需调整页面显示逻辑
                    logoutButton.style.display = 'block';
                    loginForm.style.display = 'none';
                    registerForm.style.display = 'none';
                    messageDiv.textContent = '登录成功';
                } else {
                    messageDiv.textContent = data.error;
                }
            })
            .catch(error => {
                console.error('登录请求出错：', error);
                messageDiv.textContent = error.message;
            });
    });

    // 为注册按钮添加点击事件监听器
    registerForm.addEventListener('submit', function (e) {
        e.preventDefault();

        const name = document.getElementById('registerName').value;
        const password = document.getElementById('registerPassword').value;
        const confirmPassword = document.getElementById('confirmPassword').value;

        if (name.trim() === '' || password.trim() === '' || confirmPassword.trim() === '') {
            alert('用户名、密码和确认密码不能为空');
            return;
        }

        if (password!== confirmPassword) {
            alert('两次输入的密码不一致');
            return;
        }

        // 使用fetch发送POST请求到后端注册接口
        fetch('http://localhost:3000/users', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ name, age: 0, password })
        })
            .then(response => response.text())
            .then(data => {
                if (data === '添加成功') {
                    messageDiv.textContent = '注册成功，请登录';
                } else {
                    messageDiv.textContent = '注册失败，请稍后重试';
                }
            })
            .catch(error => {
                console.error('注册请求出错：', error);
                messageDiv.textContent = '注册请求出错，请稍后重试';
            });
    });

    // 为登出按钮添加点击事件监听器
    logoutButton.addEventListener('click', function () {
        // 使用fetch发送POST请求到后端登出接口
        fetch('http://localhost:3000/logout', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            }
        })
            .then(response => response.json())
            .then(data => {
                if (data.message === '登出成功') {
                    // 登出成功，隐藏登出按钮，显示登录注册表单等，可按需调整页面显示逻辑
                    logoutButton.style.display = 'none';
                    loginForm.style.display = 'block';
                    registerForm.style.display = 'block';
                    messageDiv.textContent = '已登出';
                }
            })
            .catch(error => {
                console.error('登出请求出错：', error);
                messageDiv.textContent = '登出请求出错，请稍后重试';
            });
    });

    // 为跳转到下一个页面的按钮添加点击事件监听器
    goToNextPageButton.addEventListener('click', function () {
        window.location.href = 'index.html';
    });
</script>
</body>

</html>